<template>
    <div class="app-container">
      <el-form
        v-show="showSearch"
        :model="queryParams"
        size="small"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="createTime"
            style="width: 240px"            
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
          >搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
           <el-button
            type="primary"
            @click="handlePrint"
          >打印</el-button>
          <el-button
            type="primary"
            @click="handleExportExcel"
          >导出EXCEL</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <right-toolbar
          :show-search.sync="showSearch"
          @queryTable="getList"
        />
      </el-row>
  
      <el-table
        v-loading="loading"
        :data="productList"
        :stripe="true"
        :show-overflow-tooltip="true"
        border
       
      >
        <el-table-column 
          label="序号" 
          align="center" 
          prop="id"
          :filters="[]"
          :filter-method="filterHandler"
        />
        <el-table-column 
          label="产品名称" 
          align="center" 
          prop="name"
          :filters="getUniqueValues('name')"
          :filter-method="filterHandler"
        />
        <el-table-column 
          label="图号" 
          align="center" 
          prop="tuhao"
          :filters="getUniqueValues('tuhao')"
          :filter-method="filterHandler"
        />
        <el-table-column
          label="规格型号"
          align="center"
          prop="guige"
          :filters="getUniqueValues('guige')"
          :filter-method="filterHandler"
        />
        <el-table-column
          label="客户名称"
          align="center"
          prop="kehu"
          :filters="getUniqueValues('kehu')"
          :filter-method="filterHandler"
        />
        <el-table-column
          label="合同类型"
          align="center"
          prop="hetong_leixing"
          :filters="getUniqueValues('hetong_leixing')"
          :filter-method="filterHandler"
        />
        <el-table-column
          label="合同订单编号"
          align="center"
          prop="dingdan"
          :filters="getUniqueValues('dingdan')"
          :filter-method="filterHandler"
        />
        <el-table-column
          label="订单数量"
          align="center"
          prop="num_jihua"
          :filters="getUniqueValues('num_jihua')"
          :filter-method="filterHandler"
        />
        <el-table-column
          label="结余"
          align="center"
          prop="num_jihua_yu"
          :filters="getUniqueValues('num_jihua_yu')"
          :filter-method="filterHandler"
        />
        <el-table-column
          label="客户要求交期"
          align="center"
          prop="jiaoqi"
          :filters="getUniqueValues('jiaoqi')"
          :filter-method="filterHandler"
        />
        <el-table-column
          label="备注"
          align="center"
          prop="beizhu"
          :filters="getUniqueValues('beizhu')"
          :filter-method="filterHandler"
        />
        <el-table-column
          label="合同订单审批日期"
          align="center"
          prop="riqi_shenhe"
          :filters="getUniqueValues('riqi_shenhe')"
          :filter-method="filterHandler"
        />
        <el-table-column
          label="录入时间"
          align="center"
          prop="stime"
          :filters="getUniqueValues('stime')"
          :filter-method="filterHandler"
        />
        <el-table-column
          label="状态"
          align="center"
          prop="createTime"
          :filters="getUniqueValues('createTime')"
          :filter-method="filterHandler"
        >
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </template>
  
  <script>
  import * as XLSX from 'xlsx'
  import { getTuZhiDai } from '@/api/productManage/index'
  
  export default {
    name: 'SystemUser',
    data() {
      return {
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 10,
          startDate:"",
          endDate:""
        },
        createTime: [],
        productList: [],
      }
    },
    created() {
      this.getList()
    },
    methods: {
      /** 查询用户列表 */
      getList() {
        this.loading = false
        if (this.createTime.length) {
          this.queryParams.startDate =this.createTime[0]
          this.queryParams.endDate =this.createTime[1] 
        }
        getTuZhiDai(this.queryParams,).then((response) => {
          this.productList = response.data
          this.total = response.total
          this.loading = false
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.page = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      // 表单合计
      /*
       getSummaries(param) {
          const { columns, data } = param;
          const sums = [];
          columns.forEach((column, index) => {
            if (index === 0) {
              sums[index] = '总价';
              return;
            }
            // 只对订单数量和结余进行合计
            if (column.property === 'num_jihua' || column.property === 'num_jihua_yu') {
              const values = data.map(item => Number(item[column.property]));
              if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return prev + value;
                  } else {
                    return prev;
                  }
                }, 0);
                sums[index] += ' 元';
              } else {
                sums[index] = '';
              }
            } else {
              sums[index] = '';
            }
          });
  
          return sums;
        },
        */
        // 筛选器表格
        getUniqueValues(prop) {
        const uniqueValues = [...new Set(this.productList.map(item => item[prop]))];
        return uniqueValues.map(value => ({ text: value, value }));
      },
      filterHandler(value, row, column) {
        const property = column.property;
        return row[property] === value;
      },
      handlePrint() {
        window.print()
      },
  
      /** 导出 Excel 功能 */
      handleExportExcel() {
        if (this.productList.length === 0) {
          this.$message.warning('没有数据可供导出')
          return
        }
        // 定义 prop 到中文表头的映射
        const headerMap = {
          id: '序号',
          name: '产品名称',
          tuhao: '图号',
          guige: '规格型号',
          kehu: '客户名称',
          hetong_leixing: '合同类型',
          dingdan: '合同订单编号',
          num_jihua: '订单数量',
          num_jihua_yu: '结余',
          jiaoqi: '客户要求交期',
          beizhu: '备注',
          riqi_shenhe: '合同订单审批日期',
          stime: '录入时间',
          createTime: '状态'
        }
    
        // 转换数据以使用中文表头
        const formattedData = this.productList.map(item => {
          const newItem = {}
          for (const key in item) {
            if (headerMap[key]) {
              newItem[headerMap[key]] = item[key]
            }
          }
          return newItem
        })
    
        const worksheet = XLSX.utils.json_to_sheet(formattedData)
        const workbook = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(workbook, worksheet, '产品订单列表')
        XLSX.writeFile(workbook, '产品订单列表.xls')
      }
    }
  }
  </script>
  